<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生信息查询</title>
    <link rel="stylesheet" href="../css/info_query.css">
</head>
<body>
    <div class="container">
        <!-- 左侧面板：查询与结果 -->
        <div class="left-panel">
            <h2 style="text-align: center; color: #4CAF50;">学生信息查询</h2>

            <!-- 搜索框 -->
            <div class="search-box">
                <label>学号：</label>
                <input type="text" id="studentId" placeholder="请输入学号">

                <label>姓名：</label>
                <input type="text" id="name" placeholder="请输入姓名">

                <label>专业：</label>
                <select id="major">
                    <option value="">所有专业</option>
                    <option value="计算机">计算机</option>
                    <option value="通信工程">通信工程</option>
                </select>

                <button id="queryButton">查询</button>
            </div>

            <!-- 查询结果标题 -->
            <h2 class="result-title">学生信息查询结果</h2>

            <!-- 结果表格 -->
            <table id="resultTable">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>出生时间</th>
                        <th>专业</th>
                        <th>总学分</th>
                    </tr>
                </thead>
                <tbody id="resultBody">
                    <!-- 数据将通过JavaScript动态插入 -->
                </tbody>
            </table>
            <div class="pagination">
                <button id="prevPage" disabled>上一页</button>
                <span id="pageInfo">第 1 页，共 1 页</span>
                <button id="nextPage">下一页</button>
                <select id="pageSizeSelect">
                    <option value="5" selected>5 条/页</option>
                    <option value="10">10 条/页</option>
                    <option value="20">20 条/页</option>
                    <option value="50">50 条/页</option>
                </select>
            </div>
        </div>

        <!-- 右侧面板：附加信息 -->
        <div class="right-panel">
            <h3>附加信息</h3>
            <div class="note" id="note">暂无</div>
            <h3>照片</h3>
            <img src="../images/默认头像.png" alt="照片" class="photo" id="photo">
        </div>
    </div>

    <script type="module" src="../js/info_query.js"></script>
</body>
</html>